<template>
    <div class="silde_box">
        <slide-verify ref="block" :imgs="imgarr" slider-text="向右滑动->" :accuracy="3" @again="onAgain" @success="onSuccess"
            @fail="onFail" @refresh="onRefresh"></slide-verify>
        <div class="dangermsg" v-show="dangerorsuccessflag === false">{{ msg }}</div>
        <div class="successmsg" v-show="dangerorsuccessflag === true">{{ msg }}</div>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, defineEmits } from 'vue'
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from 'vue3-slide-verify'
import 'vue3-slide-verify/dist/style.css'
const emit = defineEmits(['failcode', 'successcode'])
const imgarr = ref([
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/19.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/20.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/21.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/22.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/23.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/24.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/880.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/881.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/882.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/883.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/884.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/885.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/886.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/887.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/888.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/899.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/890.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/891.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/892.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/893.png',
    'https://bullet001.oss-cn-shanghai.aliyuncs.com/loginpicture/894.png',
])
const msg = ref('')
const block = ref<SlideVerifyInstance>()
const onAgain = () => {
    msg.value = '检测到非人为操作的哦！ try again'
    // 刷新
    block.value?.refresh()
}
const onSuccess = (times: number) => {
    msg.value = `验证成功， 耗时${(times / 1000).toFixed(1)}s`
    console.log(111)
    dangerorsuccessflag.value = true
    emit('successcode', true)
}
const dangerorsuccessflag = ref(false)
const onFail = () => {
    msg.value = '验证不通过,请重试'
    console.log(2222)
    dangerorsuccessflag.value = false
}

const onRefresh = () => {
    msg.value = '点击了刷新小图标'
}
</script>
<style scoped lang="scss">
.silde_box {
    z-index: 999999999999999;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;

    .successmsg {
        color: greenyellow;
        margin-top: 10px;
    }

    .dangermsg {
        color: red;
        margin-top: 10px;
    }
}
</style>